<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="我的订单" navbarType='0' zIndex="10076" bgColor="#FFFFFF" leftIconColor="#333333" :isShowLeft="false" >
            <view class="wlkflex justify-center" slot="default" @click="setShowItem">
                <view class="bar-title">{{barRadios[typeIndex].name}}</view>
                <view class="ml10">
                    <u-icon :name="showItem?'arrow-up':'arrow-down'" size="10" color="#999"></u-icon>
                </view>
            </view>
        </wlk-navbar>
        <u-popup mode="top" :show="showItem"  @close="showItem=false" :safeAreaInsetBottom="false" safeAreaInsetTop>
            <view class="wlkflex tag-box">
                <view class="ml20" v-for="(item, index) in barRadios" :key="index">
                    <u-tag size="large" :text="item.name" :plain="typeIndex!=index" type="warning" :name="index"
                           @click="typeClick(index)">
                    </u-tag>
                </view>
            </view>
        </u-popup>
        <u-sticky bgColor="#fff">
            <view class="content-tabs">
                <u-tabs
                        :activeStyle="{
                        color: themeColor,
                        fontSize: '28rpx',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)'
                    }"
                        :itemStyle="{
                         height: '40px',
                         alignItems:'flex-start',
                         padding:'0 30rpx',
                    }"
                        :inactiveStyle="{
                        color: '#646566',
                        fontSize: '28rpx',
                        transform: 'scale(1)'
                    }"
                        :list="tabList"
                        lineWidth="35"
                        lineHeight="2"
                        :current="current"
                        :lineColor="themeColor"
                        :scrollable="false"
                        @change="tabclick"
                ></u-tabs>
            </view>
        </u-sticky>
        <block v-if="loadStatus=='nomore' && list.length==0">
            <view class="not-data">
                <u-empty
                        :icon="uEmpty.order"
                        text="没有订单记录"
                >
                </u-empty>
            </view>
        </block>
        <block v-else>
            <view v-for="item in list" class="bgw item-box br04 overHidden">
                <block v-if="status=='refund'">
                  <view class="order" v-if="barRadios[typeIndex].type=='line'" @click="$Router.push('/pages/order/refund?id='+item.id)">
                        <view class="order-head wlkflex justify-between">
                            <view class="o-head-sn">
                                退单编号：{{item.refund_sn}}
                            </view>
                            <view class="o-head-status">
                                <u--text type="warning" v-if="item.status=='0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                                <u--text type="info" v-if="item.status<'0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                                <u--text type="error" v-if="item.status>'0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                            </view>
                        </view>
                        <view class="order-info mt30 wlkflex justify-between wd100 align-start">
                            <view class="o-info-img br04 overHidden">
                                <image class="wd100 hg100" lazy-load :src="item.be_order.line_info.images[0]"  mode="aspectFill"/>
                            </view>
                            <view class="o-info-main">
                                <view class="o-main-title u-line-2">
                                    {{item.be_order.line_info.title}}
                                </view>
                                <view class="o-main-date mt20">
                                    {{item.be_order.date}} <text class="ml05">出发</text>
                                </view>
                                <view class="o-main-user mt20">
                                    <text v-if="item.be_order.adult_num>0">{{item.be_order.adult_num}}成人</text>
                                    <text v-if="item.be_order.elder_num>0">{{item.be_order.elder_num}}老人</text>
                                    <text v-if="item.be_order.child_num>0">{{item.be_order.child_num}}儿童</text>
                                </view>
                            </view>
                        </view>
                        <view class="o-total-price mt20 bold">
                            ￥{{item.refund_fee}}
                        </view>
                        <view class="o-button wlkflex justify-end mt20" @tap.stop="cancelRefundChose(item.id)" v-if="item.refund_status=='1'">
                            <view style="width: 25%">
                                <u-button :customStyle="{
			                    margin:'0',
			                    width:'100%',
			                    fontSize:'14rpx',
			                    height:'70rpx'
                         }" :color="themeColor" plain shape="circle"  text="取消申请"></u-button>

                            </view>
                        </view>
                    </view>
                  <view class="order" v-if="barRadios[typeIndex].type=='ticket'" @click="$Router.push('/pages/order/refund?id='+item.id)">
                    <view class="order-head wlkflex justify-between">
                      <view class="o-head-sn">
                        退单编号：{{item.refund_sn}}
                      </view>
                      <view class="o-head-status">
                        <u--text type="warning" v-if="item.status=='0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                        <u--text type="info" v-if="item.status<'0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                        <u--text type="error" v-if="item.status>'0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                      </view>
                    </view>
                    <view class="order-info mt30 wlkflex justify-between wd100 align-start">
                      <view class="o-info-img br04 overHidden">
                        <image class="wd100 hg100" lazy-load :src="item.be_order.ticket_info.images[0]"  mode="aspectFill"/>
                      </view>
                      <view class="o-info-main">
                        <view class="o-main-title u-line-2">
                          {{item.be_order.ticket_info.title}}
                        </view>
                        <view class="o-main-date mt20">
                          {{item.be_order.date}} <text class="ml05">出发</text>
                        </view>
                        <view class="o-main-user mt20">
                          <text class="mr10">{{item.be_order.suit_info.name}}</text><text class="mr05">x{{item.be_order.number}}</text>张
                        </view>
                      </view>
                    </view>
                    <view class="o-total-price mt20 bold">
                      ￥{{item.refund_fee}}
                    </view>
                    <view class="o-button wlkflex justify-end mt20" @tap.stop="cancelRefundChose(item.id)" v-if="item.refund_status=='1'">
                      <view style="width: 25%">
                        <u-button :customStyle="{
			                    margin:'0',
			                    width:'100%',
			                    fontSize:'14rpx',
			                    height:'70rpx'
                         }" :color="themeColor" plain shape="circle"  text="取消申请"></u-button>

                      </view>
                    </view>
                  </view>
                </block>
                <block v-else>
                    <view class="order" v-if="barRadios[typeIndex].type=='line'" @click="$Router.push('/pages/order/detail?id='+item.id)">
                        <view class="order-head wlkflex justify-between">
                            <view class="o-head-sn">
                                订单编号：{{item.order_sn}}
                            </view>
                            <view class="o-head-status">
                                <u--text type="warning" v-if="item.status=='0'" align="right" size="14" :text="item.status_text"></u--text>
                                <u--text type="info" v-if="item.status<'0'" align="right" size="14" :text="item.status_text"></u--text>
                                <u--text type="error" v-if="item.status>'0'" align="right" size="14" :text="item.status_text"></u--text>
                            </view>
                        </view>
                        <view class="order-info mt30 wlkflex justify-between wd100 align-start">
                            <view class="o-info-img br04 overHidden">
                                <image class="wd100 hg100" lazy-load :src="item.line_info.images[0]"  mode="aspectFill"/>
                            </view>
                            <view class="o-info-main">
                                <view class="o-main-title u-line-2">
                                    {{item.line_info.title}}
                                </view>
                                <view class="wlkflex justify-between">
                                    <view>
                                        <view class="o-main-date mt20">
                                            {{item.date}} <text class="ml05">出发</text>
                                        </view>
                                        <view class="o-main-user mt20">
                                            <text v-if="item.adult_num>0">{{item.adult_num}}成人</text>
                                            <text v-if="item.elder_num>0">{{item.elder_num}}老人</text>
                                            <text v-if="item.child_num>0">{{item.child_num}}儿童</text>
                                        </view>
                                    </view>
                                    <view>
                                        <u--text size="14" v-if="!$u.test.isEmpty(item.refund_order)" type="warning" :text="item.refund_order.status_text"></u--text>

                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="o-total-price mt20 bold">
                            ￥{{item.total_fee}}
                        </view>
                        <view class="o-button wlkflex justify-end mt20" v-if="item.status=='0'">
                            <view style="width: 25%" @tap.stop="$Router.push('/pages/pay/pay?type=line&id='+item.id)">
                                <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :color="themeColor" plain shape="circle"  text="立即支付"></u-button>

                            </view>
                        </view>
                    </view>
                    <view class="order" v-if="barRadios[typeIndex].type=='ticket'" @click="$Router.push('/pages/order/ticket_detail?id='+item.id)">
                    <view class="order-head wlkflex justify-between">
                      <view class="o-head-sn">
                        订单编号：{{item.order_sn}}
                      </view>
                      <view class="o-head-status">
                        <u--text type="warning" v-if="item.status=='0'" align="right" size="14" :text="item.status_text"></u--text>
                        <u--text type="info" v-if="item.status<'0'" align="right" size="14" :text="item.status_text"></u--text>
                        <u--text type="error" v-if="item.status>'0'" align="right" size="14" :text="item.status_text"></u--text>
                      </view>
                    </view>
                    <view class="order-info mt30 wlkflex justify-between wd100 align-start">
                      <view class="o-info-img br04 overHidden">
                        <image class="wd100 hg100" lazy-load :src="item.ticket_info.images[0]"  mode="aspectFill"/>
                      </view>
                      <view class="o-info-main">
                        <view class="o-main-title u-line-2">
                          {{item.ticket_info.title}}
                        </view>
                        <view class="wlkflex justify-between">
                          <view>
                            <view class="o-main-date mt20">
                              {{item.date}} <text class="ml05">使用</text>
                            </view>
                            <view class="o-main-user mt20 u-line-1">
                              <text class="mr10">{{item.suit_info.name}}</text><text class="mr05">x{{item.number}}</text>张
                            </view>
                          </view>
                          <view>
                            <u--text size="14" v-if="!$u.test.isEmpty(item.refund_order)" type="warning" :text="item.refund_order.status_text"></u--text>

                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="o-total-price mt20 bold">
                      ￥{{item.total_fee}}
                    </view>
                    <view class="o-button wlkflex justify-end mt20" v-if="item.status=='0'">
                      <view style="width: 25%" @tap.stop="$Router.push('/pages/pay/pay?type=ticket&id='+item.id)">
                        <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :color="themeColor" plain shape="circle"  text="立即支付"></u-button>

                      </view>
                    </view>
                      <view class="o-button wlkflex justify-end mt20" v-if="item.status>'0'">
                        <view style="width: 25%" @tap.stop="qrCode(item)">
                          <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :color="themeColor" plain shape="circle" icon="scan" text="核销码"></u-button>

                        </view>
                      </view>
                  </view>
                    <view class="insure" v-if="barRadios[typeIndex].type=='project'" @click="$Router.push('/pages/order/project_detail?id='+item.id)">
                        <view class="insure-head wlkflex justify-between">
                            <view class="i-head-sn">
                                订单编号: {{item.order_sn}}
                            </view>
                            <view class="i-head-status">
                                <u--text type="warning" v-if="item.status=='0'" align="right" size="14" :text="item.status_text"></u--text>
                                <u--text type="info" v-if="item.status<'0'" align="right" size="14" :text="item.status_text"></u--text>
                                <u--text type="error" v-if="item.status>'0'" align="right" size="14" :text="item.status_text"></u--text>
                            </view>
                        </view>
                        <view class="insure-info mt20">
                            <view class="mt10">
                                <text class="col9">保险名称：</text>
                                <text>{{item.project_info.name}}</text>
                            </view>
                            <view class="mt10">
                                <text class="col9">保障时间：</text>
                                <text>{{item.project_info.usetime}}</text>
                            </view>
                            <view class="mt10">
                                <text class="col9">投保人数：</text>
                                <text v-if="item.adult_num>0">{{item.adult_num}}成人</text>
                                <text v-if="item.elder_num>0">{{item.elder_num}}老人</text>
                                <text v-if="item.child_num>0">{{item.child_num}}儿童</text>
                            </view>
                        </view>
                        <view class="o-total-price mt20 bold">
                            ￥{{item.total_fee}}
                        </view>
                    </view>
                </block>
            </view>
            <view class="load-more">
                <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
            </view>
        </block>

        <u-modal :show="refundModel" title="提示" showCancelButton @confirm="cancelRefund" @cancel="refundModel=false" :confirmColor="themeColor" content="是否取消退款申请？"></u-modal>
      <u-popup :customStyle="{width:'92%',whiteSpace: 'nowrap',padding:'30rpx 30rpx'}" round="10" closeable :show="showCode" closeOnClickOverlay mode="center" @close="showCode=false">
        <view class="verify-box">
          <view class="code" v-if="!$u.test.isEmpty(codeItem)">
            <view class="wlkflex justify-center align-center ">
              <view class="template br08">
                <l-painter :css="{width: '230rpx',height:'230rpx',position:'relative'}">
                  <template>
                    <l-painter-view>
                      <l-painter-qrcode
                          :css="{width: '230rpx',height:'230rpx'}"
                          :text="codeItem.verify_info.url"
                      />
                    </l-painter-view>
                    <l-painter-view v-if="codeItem.verify_info.status > 0"
                                    css="position: absolute;display:flex;justify-content:center;align-items:center;height: 230rpx;width: 230rpx;background-color: rgba(255,255,255,0.8)">
                      <l-painter-image
                          css="width: 140rpx"
                          src="/static/images/order/verify.png"
                      />
                    </l-painter-view>
                    <l-painter-view v-else-if="!$u.test.isEmpty(codeItem.refund_order)"
                                    css="position: absolute;display:flex;justify-content:center;align-items:center;height: 230rpx;width: 230rpx;background-color: rgba(255,255,255,0.8)">
                      <l-painter-image
                          css="width: 140rpx"
                          src="/static/images/order/refund.png"
                      />
                    </l-painter-view>
                  </template>
                </l-painter>
              </view>
            </view>
            <u-divider :dashed="true"></u-divider>
            <view class="code-info">
              <view class="wlkflex justify-between mt20 ">
                <view class="code-title">核销码</view>
                <view class="code-info-value wlkflex">
                  <view>{{codeItem.verify_info.code}}</view>
                  <view class="ml20 copy-btn" @click="copyOrderSn(codeItem.verify_info.code)">
                    复制
                  </view>
                </view>
              </view>
              <view class="wlkflex justify-between mt20 ">
                <view class="code-title">核销状态</view>
                <view class="code-info-value wlkflex">
                  {{codeItem.verify_info.status_text}}
                </view>
              </view>
              <block v-if="codeItem.verify_info.status > 0">
                <view class="wlkflex justify-between mt20 ">
                  <view class="code-title">核销时间</view>
                  <view class="code-info-value wlkflex">
                    {{codeItem.verify_info.verifytime}}
                  </view>
                </view>
                <view class="wlkflex justify-between mt20 ">
                  <view class="code-title">核销员</view>
                  <view class="code-info-value wlkflex">
                    {{codeItem.verify_info.saler_name}}
                  </view>
                </view>
              </block>

            </view>
          </view>
        </view>
      </u-popup>


      <wlk-tabbar></wlk-tabbar>
    </view>
</template>

<script>
    import {copy} from '@/wlkutils/tools';
    import { mapGetters } from 'vuex';
    var _self;
    export default {
        computed: {
            ...mapGetters(['themeColor','isLogin','orderStatus','uEmpty','orderType'])
        },
        data() {
            return {
                barRadios:[
                    {
                        type:'line',
                        checked: true,
                        name:'线路订单'
                    },
                    {
                        type:'project',
                        checked: false,
                        name:'保险订单'
                    },
                    {
                      type:'ticket',
                      checked: false,
                      name:'门票订单'
                    }
                ],
                typeIndex:0,
                showItem:false,
                refundModel :false,
                tabList: [
                    {
                        status: 'all',
                        name: '全部',
                    },
                    {
                        status: 0,
                        name: '待付款',
                    },
                    {
                        status: 1,
                        name: '已支付',
                    },

                    {
                        status: 3,
                        name: '已完成',
                    },
                    {
                        status: 'refund',
                        name: '退款',
                    },
                ],
                current:0,
                status:'all',
                list:[],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                chose_id:0,
              showCode:false,
              codeItem:{},
            };
        },
        onLoad(options) {
            _self = this;
        },
        onShow() {
            let status = this.orderStatus;
            if (status){
                _self.tabList.forEach((item,index)=>{
                    if (item.status==status){
                        _self.current = index;
                        _self.status = item.status;
                    }
                })
            }else{
                _self.current = 0;
                _self.status = 'all';
            }
            this.typeIndex = this.orderType;
            this.re_Data();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
        methods: {
            setShowItem(){
                this.showItem = !this.showItem;
            },
            typeClick(type){
                this.typeIndex =type;
                this.setShowItem();
                this.re_Data();
            },
            re_Data(){
                this.page = 1;
                this.loadStatus = 'loading';
                this.list=[];
                this.getData();
            },
            tabclick(item) {
              this.$store.commit('setOrderStatus',item.status);
                this.current = item.index;
                this.status = item.status;
                this.re_Data();
            },
            async getData() {
                if(this.isLogin){
                    if(this.status=='refund'){
                        var res = await uni.$u.http.post("refund/getList", {
                            page:this.page,
                            type: this.barRadios[this.typeIndex].type,
                        });
                    }else{
                        var res = await uni.$u.http.post("order/getList", {
                            page:this.page,
                            status: this.status,
                            type: this.barRadios[this.typeIndex].type,
                        });
                    }
                    if (res && res.data && res.data.rows) {
                        this.list = this.list.concat(res.data.rows);
                    }
                    this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
                }else{
                    this.loadStatus  = 'nomore';
                }
            },
            cancelRefundChose(id){
              this.chose_id =  id;
              this.refundModel = true;
            },
            cancelRefund(){
                uni.$u.http.post('refund/unRefund', {
                    id: _self.chose_id,
                    type:'line'
                }).then(res => {
                    _self.refundModel = false;
                    _self.re_Data();
                }).catch(res => {
                })
            },
          qrCode(codeItem){
              console.log(codeItem)
            this.codeItem = codeItem;
            this.showCode = true;
          },
          copyOrderSn(v){
            copy(v);
          },
        },
    };
</script>

<style lang="scss">
    .bar-title{
        font-size: $font-lt;
    }
    .tag-box{
        padding: 120rpx 0 60rpx 0;
    }
    .content-tabs{
        background-color: #FFFFFF;
        padding-top: 20rpx;
        width: 100%;
        border-bottom: 1px solid #F3F3F3;
        height: 49px;
    }
    .item-box{
        margin: 30rpx;
        .order{
            padding: 20rpx 30rpx 30rpx 30rpx;
            .order-head{
                font-size: $font-base;
                .o-head-sn{
                    width: 80%;
                }
                .o-head-status{
                    width: 20%;
                    text-align: right;
                    color: red;
                }
            }
            .order-info{
                .o-info-img{
                    width: 200rpx;
                    height:  200rpx;
                    text-align: center
                }
                .o-info-main{
                   width: 65%;
                    .o-main-title{
                        font-size: $font-lt;
                        font-weight: bold;
                    }
                    .o-main-date{
                        font-size: $font-sm;
                        color: #666;
                    }
                    .o-main-user{
                        font-size: $font-sm;
                        color: #666;
                    }
                }
            }
            .o-total-price{
                text-align: right;
                font-size: $font-base;
            }
            .o-button{
                text-align: right;
                padding: 20rpx 0 0 0;
                border-top: $-dashed-border;
            }

        }
        .insure{
            padding: 20rpx 30rpx 30rpx 30rpx;
            .insure-head{
                font-size: $font-base;
                .i-head-sn{
                    width: 80%;
                }
                .i-head-status{
                    width: 20%;
                    text-align: right;
                    color: red;
                }
            }
            .insure-info{
                font-size: $font-base;
            }
            .o-total-price{
                text-align: right;
                font-size: $font-base;
            }
        }

    }

    .verify-box{
      .code{
        padding: 30rpx 0 30rpx 0;
        background-color: #FFFFFF;
        border-radius: 0 0 8px 8px;
        .template{
          background-color: #f6f7f9;
          padding: 20rpx;
          width: 265rpx;
        }
        .code-info{
          font-size: $font-base;
          .code-title{
            color: $uni-text-color-grey;
          }
          .code-info-value{
            .copy-btn{
              padding: 5rpx 20rpx;
              border-radius: 30rpx;
              border:$-solid-border ;
              font-size: $font-sm;
              color:$uni-text-color-grey;
            }
          }

        }
      }
    }

</style>
